<template>
    <div class="settings-web-info-box">
        <el-form label-width="120px">
            <el-form-item label="网站名称">
                <el-input v-model.trim="webSizeTitle"></el-input>
            </el-form-item>
            <el-form-item label="网站关键字">
                <el-input v-model.trim="keywords" placeholder="关键字请用“ , ”号隔开"></el-input>
            </el-form-item>
            <el-form-item label="网站描述">
                <el-input type="textarea" :row="3" v-model.trim="description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="updateSeoInfo">更新</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {getSeoInfo, getWebSizeTitle, upWebSizeTitle, putSeoInfo} from '@/api/api'

    export default {

        data() {
            return {
                webSizeTitle: '',
                keywords: '',
                description: '',
                oldInfo: {
                    webSizeTitle: '',
                    keywords: '',
                    description: ''
                }
            }
        },
        created() {
            this.getSeoInfo()
            this.getWebSizeTitle()
        },
        methods: {
            // 更新SEO信息
            updateSeoInfo() {
                // 检查数据
                if (this.webSizeTitle === '') {
                    this.$message.error('网站标题不可以为空')
                    return;
                }
                if (this.keywords === '') {
                    this.$message.error('网站关键字不可以为空')
                    return;
                }
                if (this.description === '') {
                    this.$message.error('网站描述不可以为空')
                    return;
                }
                // 如果是更新SEO信息，就不做标题更新成功提示
                let isSeoInfoUpdate = false
                if (this.description !== this.oldInfo.description || this.keywords !== this.oldInfo.keywords) {
                    isSeoInfoUpdate = true
                    putSeoInfo(this.keywords, this.description).then(response => {
                        if (response.code === 20000) {
                            this.$message.success(response.message)
                            this.getWebSizeTitle()
                        }
                    })
                }
                // 如果是更新SEO信息，就不做标题更新成功提示
                if (this.webSizeTitle !== this.oldInfo.webSizeTitle) {
                    // 更新网站标题
                    upWebSizeTitle(this.webSizeTitle).then(response => {
                        if (response.code === 20000) {
                            // 如果是更新SEO信息，就不做标题更新成功提示
                            if (!isSeoInfoUpdate) {
                                this.$message.success(response.message);
                            }
                            this.getWebSizeTitle()
                        } else {
                            this.$message.error(response.message)
                        }
                    })
                }

            },
            // 获取SEO信息
            getSeoInfo() {
                getSeoInfo().then(response => {
                    if (response.code === 20000) {
                        this.keywords = response.data['web_size_keywords']  // map 形式取值 key value
                        this.description = response.data['web_size_description']
                        this.oldInfo.keywords = this.keywords
                        this.oldInfo.description = this.description
                    }
                })
            },
            // 获取网站标题
            getWebSizeTitle() {
                getWebSizeTitle().then(response => {
                    if (response.code === 20000) {
                        this.webSizeTitle = response.data.setValue
                        this.oldInfo.webSizeTitle = this.webSizeTitle
                    }
                })
            }
        }
    }
</script>
<style scoped>
    .settings-web-info-box .el-input, .settings-web-info-box .el-textarea {
        width: 300px;
    }

    .settings-web-info-box {
        margin: 20px auto;
    }

</style>